import React, { lazy, Suspense } from 'react';
import { Navigate, useRoutes } from 'react-router-dom';
import RouteLayout from './layout';

const LazyRoute = ({ children }) => (<Suspense fallback={<div>loading...</div>}>{children}</Suspense>);

const Home = lazy(() => import('./views/Home'));
const Login = lazy(() => import('./views/Login'));
const Waiter = lazy(() => import('./views/Waiter'));
const WaiterEdit = lazy(() => import('./views/Waiter/Edit'));
const Business = lazy(() => import('./views/Business'));
const Order = lazy(() => import('./views/Order'));
const Swiper = lazy(() => import('./views/Swiper'));
const Message = lazy(() => import('./views/Message'));
const Finance = lazy(() => import('./views/Finance'));
const Share = lazy(() => import('./views/Share'));
const Comments = lazy(() => import('./views/Comments'));

const Permissions = ({ children }) => children;
// const token = getStorage(TOKEN);
// return token ? children : <Navigate to="/login" />;

const Index = () => {
    const element = useRoutes([
        {
            path: '/',
            element: <Permissions><RouteLayout /></Permissions>,
            children: [
                {
                    path: '/',
                    element: <Navigate to="home" />,
                },
                {
                    path: 'home',
                    element: <LazyRoute><Home /></LazyRoute>,
                },
                {
                    path: 'waiter/edit/:id',
                    element: <LazyRoute><WaiterEdit /></LazyRoute>,
                },
                {
                    path: 'waiter',
                    element: <LazyRoute><Waiter /></LazyRoute>,
                },
                {
                    path: 'business',
                    element: <LazyRoute><Business /></LazyRoute>,
                },
                {
                    path: 'order',
                    element: <LazyRoute><Order /></LazyRoute>,
                },
                {
                    path: 'swiper',
                    element: <LazyRoute><Swiper /></LazyRoute>,
                },
                {
                    path: 'message',
                    element: <LazyRoute><Message /></LazyRoute>,
                },
                {
                    path: 'finance',
                    element: <LazyRoute><Finance /></LazyRoute>,
                },
                {
                    path: 'share',
                    element: <LazyRoute><Share /></LazyRoute>,
                },
                {
                    path: 'comments',
                    element: <LazyRoute><Comments /></LazyRoute>,
                },
            ],
        },
        {
            path: '/login',
            element: <LazyRoute><Login /></LazyRoute>,
        },
    ]);
    return element;
};

export default Index;
